<template>
  <div v-if="iswhOK"  :style="{ width: backgroundWidth + 'px',height:backgroundHeight+'px' }">
    <MainContainer />
  </div>
</template>

<script setup>


import {onBeforeUnmount, onMounted, ref, watchEffect} from 'vue';
import axios from 'axios';
import setting from '@/setting.js';
import {ElMessage} from "element-plus";
import {jsonApi} from "@/global.js";
import MainContainer from "@/components/StudentMain/MainContainer.vue";

const isInitUserInfo = ref(false);
const isInitReportInfo= ref(false);
const backgroundWidth = ref(0);
const backgroundHeight = ref(0);
const iswhOK = ref(false);
const reportInfoReady = ref(false); // 新增状态变量
onMounted(() => {
  updateHeaderWidth();
  window.addEventListener('resize', updateHeaderWidth);
});
// 组件卸载前执行的操作
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateHeaderWidth);
});
// 方法定义
function updateHeaderWidth() {
  // 确保this.$refs.header已经存在
      backgroundHeight.value=window.innerHeight;
      backgroundWidth.value=backgroundHeight.value*(16/9);
      if(backgroundWidth.value<window.innerWidth-10){
        backgroundWidth.value = window.innerWidth;
        backgroundHeight.value=backgroundWidth.value*(9/16);
      }
      iswhOK.value=true;
}

</script>

<style scoped>
.login-alert {
  /* 添加一些样式以适应您的UI设计 */
  text-align: center;
  margin-top: 50px;
  font-size: 18px;
}
</style>